<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header @back="goBack" content="考试管理"> </el-page-header>
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <div class="JADP-common-layout">
        <div class="JADP-common-layout-center">
          <el-row class="JADP-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="考试标题">
                  <el-input
                    v-model="query.examinationtitle"
                    placeholder="请输入"
                    clearable
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="试卷类型">
                  <el-select
                    v-model="query.papertype"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in getDict('shijuanleixing')"
                      :key="index"
                      :label="item.dataName"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="试卷状态">
                  <el-select
                    v-model="query.paperstatus"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in getDict(
                        'banjikaoshishijuanzhuangtai'
                      )"
                      :key="index"
                      :label="item.dataName"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <!-- <el-col :span="6">
                <el-form-item label="考试时间">
                  <el-date-picker
                    v-model="query.examinationtime"
                    type="datetimerange"
                    value-format="timestamp"
                    format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col> -->

              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                    >查询</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <div class="JADP-common-layout-main JADP-flex-main">
            <div class="JADP-common-head">
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="addOrUpdateHandle()"
                  >新增
                </el-button>
                <!-- <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="handleBatchRemoveDel()"
                  >批量删除
                </el-button> -->
              </div>
            </div>
            <JADP-table
              v-loading="listLoading"
              :data="list"
              @sort-change="sortChange"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                prop="examinationtitle"
                label="考试标题"
                align="left"
              />
              <el-table-column
                prop="starttime"
                label="考试开始时间"
                align="left"
              />
              <el-table-column
                prop="endtime"
                label="考试结束时间"
                align="left"
              />
              <el-table-column prop="papertype" label="试卷类型" align="left">
                <template v-slot="{ row }">
                  {{ getDict("shijuanleixing", row.papertype) }}
                </template>
              </el-table-column>

              <el-table-column
                prop="questionmethod"
                label="考试方式"
                align="left"
              >
                <template v-slot="{ row }">
                  {{ getDict("questionmethod", row.questionmethod) }}
                </template>
              </el-table-column>

              <el-table-column prop="paperstatus" label="试卷状态" align="left">
                <template v-slot="{ row }">
                  {{ getDict("banjikaoshishijuanzhuangtai", row.paperstatus) }}
                </template>
              </el-table-column>

              <!-- <el-table-column
                prop="examinationdesc"
                label="考试描述"
                align="left"
              /> -->
              <!-- <el-table-column
                prop="creatortime"
                label="创建时间"
                align="left"
              /> -->
              <el-table-column prop="startup" label="启动时间" align="left" />
              <!-- <el-table-column prop="paperstatus" label="启动试卷" align="left">
                <template v-slot="{ row }">
                  <el-switch
                    v-model="row.paperstatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="switchChange(row)"
                  >
                  </el-switch>
                </template>
              </el-table-column> -->
              <el-table-column label="操作" fixed="right" width="320">
                <template slot-scope="scope">
                  <el-button @click="monitoringCenter(scope.row)" type="text"
                    >监考中心</el-button
                  >
                  <el-button
                    type="text"
                    @click="switchChange(scope.row)"
                    :disabled="
                      scope.row.paperstatus !==
                        'f405dc5c591a4a7382d3ecf74a3d0b4a'
                    "
                    >{{
                      scope.row.paperstatus !==
                      "f405dc5c591a4a7382d3ecf74a3d0b4a"
                        ? "已启动"
                        : "启动试卷"
                    }}
                  </el-button>

                  <el-button
                    type="text"
                    @click="addOrUpdateHandle(scope.row.id)"
                    v-if="
                      scope.row.paperstatus ==
                        'f405dc5c591a4a7382d3ecf74a3d0b4a'
                    "
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-else
                    type="text"
                    @click="addOrUpdateHandle(scope.row.id, true)"
                  >
                    查看
                  </el-button>
                  <el-button
                    type="text"
                    class="JADP-table-delBtn"
                    v-if="
                      scope.row.paperstatus ==
                        'f405dc5c591a4a7382d3ecf74a3d0b4a'
                    "
                    @click="handleDel(scope.row.id)"
                    >删除
                  </el-button>
                  <!-- <el-button
                    type="text"
                    @click="addOrUpdateHandle(scope.row.id, true)"
                    >详情
                  </el-button> -->

                  <!-- <el-button type="text" @click="bukao(scope.row)"
                    >查看考试人员
                  </el-button> -->
                </template>
              </el-table-column>
            </JADP-table>
            <pagination
              :total="total"
              :page.sync="listQuery.currentPage"
              :limit.sync="listQuery.pageSize"
              @pagination="initData"
            />
          </div>
        </div>
        <JADP-Form v-if="formVisible" ref="JADPForm" @refresh="refresh" />
        <MonitoringCenter
          ref="MonitoringCenter"
          v-if="monitoringCenterVisible"
        />
        <Bukaoform ref="Bukaoform" />
        <StartTestPaper
          v-if="StartTestPaperVisible"
          ref="StartTestPaper"
          @refresh="refresh"
        />
      </div>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import JADPForm from "./Form";
import Bukaoform from "./examiners.vue";
import StartTestPaper from "./StartTestPaper.vue";
import MonitoringCenter from "./monitoringCenter.vue";
export default {
  name: "shijuanguanli",
  components: {
    JADPForm,
    Bukaoform,
    StartTestPaper,
    MonitoringCenter
  },
  data() {
    return {
      //导入属性
      importBoxVisible: false,
      monitoringCenterVisible: false,
      URL: "clazzpaper/Xy_ks_clazz_paper",
      showAll: false,
      query: {
        clazzid: undefined,
        paperid: undefined,
        papertype: undefined,
        paperstatus: undefined,
        examinationtitle: undefined,
        examinationtime: undefined
      },
      defaultProps: {
        children: "children",
        label: "fullName"
      },
      clazzid: "",
      list: [],
      listLoading: true,
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      },
      formVisible: false,
      exportBoxVisible: false,
      StartTestPaperVisible: false,
      columnList: [
        { prop: "clazzid", label: "班级ID" },
        { prop: "paperid", label: "试卷ID" },
        { prop: "papertype", label: "试卷类型(正常考试，补考)" },
        { prop: "examinationtime", label: "考试时间" },
        { prop: "paperstatus", label: "试卷状态(考试中，未开始，考试结束)" },
        { prop: "examinationtitle", label: "考试标题" },
        { prop: "examinationdesc", label: "考试描述" },
        { prop: "creatortime", label: "创建时间" }
      ],
      papertypeOptions: [],
      paperstatusOptions: []
    };
  },
  methods: {
    // 监考中心
    monitoringCenter(row) {
      this.monitoringCenterVisible = true;
      this.$nextTick(() => {
        this.$refs.MonitoringCenter.clazzid = this.clazzid;
        this.$refs.MonitoringCenter.cpid = row.id;
        this.$refs.MonitoringCenter.initData();
      });
    },
    goBack() {
      this.$emit("refresh", true);
    },
    // bukao(row) {
    //   this.$refs.Bukaoform.cpid = row.id;
    //   this.$refs.Bukaoform.clazzid = this.clazzid;
    //   this.$refs.Bukaoform.init();
    // },
    switchChange(val) {
      //判断是否补考
      if (val.papertype == "8167e907204d4f008fbf70805ebf902c") {
        this.StartTestPaperVisible = true;
        this.$nextTick(() => {
          this.$refs.StartTestPaper.papertype = val.papertype;
          this.$refs.StartTestPaper.init(this.clazzid, val.id, val.paperid);
        });
      } else {
        this.$confirm(
          "试卷一旦启动，便无法修改和删除，你确定要启动试卷吗？",
          "提示",
          {
            type: "warning"
          }
        ).then(() => {
          request({
            url: `/api/stuAnswer/Xy_ks_stu_answer/startup`,
            method: "post",
            data: {
              clazzid: this.clazzid,
              cpid: val.id,
              paperid: val.paperid,
              organizeId:this.$store.getters.organizeId
            }
          })
            .then(res => {
              this.$message.success(res.msg);
              this.initData();
            })
            .catch(() => {});
        });
      }
    },
    ImportPreviewApi(val) {
      let query = { fileName: val };
      request({
        url: `/api/clazzpaper/Xy_ks_clazz_paper/ImportPreview`,
        method: "get",
        data: query
      })
        .then(res => {
          this.$refs.importBox.list = res.data.dataRow;
          this.$refs.importBox.btnLoading = false;
          this.$refs.importBox.active++;
        })
        .catch(() => {
          this.$refs.importBox.btnLoading = false;
        });
    },
    importDataApi(val) {
      let query = { list: val,organizeId :this.$store.getters.organizeId };
      request({
        url: `/api/clazzpaper/Xy_ks_clazz_paper/ImportData`,
        method: "post",
        data: query
      })
        .then(res => {
          this.$refs.importBox.result = res.data;
          this.$refs.importBox.resultList = res.data.failResult;
          this.$refs.importBox.btnLoading = false;
          this.$refs.importBox.active++;
        })
        .catch(() => {
          this.$refs.importBox.btnLoading = false;
        });
    },
    TemplateDownload() {
      request({
        url: `/api/clazzpaper/Xy_ks_clazz_paper/templateDownload`,
        method: "post"
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
      });
    },
    uploadForm() {
      this.importBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.importBox.init(this.columnList);
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    initData() {
      this.listLoading = true;
      this.query.clazzid = this.clazzid;
      let _query = {
        ...this.listQuery,
        ...this.query,
        organizeId:this.$store.getters.organizeId
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: `/api/clazzpaper/Xy_ks_clazz_paper`,
        method: "get",
        data: query
      }).then(res => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    handleDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: `/api/clazzpaper/Xy_ks_clazz_paper/${id}`,
            method: "DELETE"
          }).then(res => {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.initData();
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      const res = val.map(item => item.id);
      this.multipleSelection = res;
    },
    handleBatchRemoveDel() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: "error",
          message: "请选择一条数据",
          duration: 1500
        });
        return;
      }
      const ids = this.multipleSelection.join();
      this.$confirm("您确定要删除这些数据吗, 是否继续？", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: `/api/clazzpaper/Xy_ks_clazz_paper/batchRemove/${ids}`,
            method: "DELETE"
          }).then(res => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              }
            });
          });
        })
        .catch(() => {});
    },
    addOrUpdateHandle(id, isDetail) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.JADPForm.dataForm.clazzid = this.query.clazzid;
        this.$refs.JADPForm.init(id, isDetail);
      });
    },
    download(data) {
      let query = { ...data, ...this.listQuery, ...this.query };
      request({
        url: `/api/clazzpaper/Xy_ks_clazz_paper/Actions/Export`,
        method: "GET",
        data: query
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
        this.$refs.ExportBox.visible = false;
        this.exportBoxVisible = false;
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      this.StartTestPaperVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      // for (let key in this.query) {
      //   this.query[key] = undefined;
      // }
      this.query.papertype = undefined;
      this.query.paperstatus = undefined;
      this.query.examinationtitle = undefined;
      this.query.examinationtime = undefined;
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    }
  }
};
</script>
<style scoped lang="less"></style>
